<template>
    <div class="profile-container">
        <div class="profile-header">
            <div class="profile-info">
                <Image class="profile-info-avatar" round fit="cover" :src=userStore.avatar></Image>
                <span class="profile-info-nickname">{{ userStore.nickName }}</span>

                <span class="profile-info-address align">
                    <var-chip type="default" size="mini" v-if="userStore.permissions[0] == 0">VIP</var-chip>
                    <var-chip type="warning" size="mini" v-else>VIP</var-chip>

                    {{ userStore.userName }}

                </span>
                <span class="profile-info-address align">
                    Balance: &nbsp; {{ userStore.permissions[1] }}

                </span>
            </div>
        </div>

        <!-- <CellGroup class="action-group">
            <Cell icon="user-circle-o" title="Edit the avatar" is-link />
            
            <Cell icon="clock-o" title="My order" is-link @click="order"/>
        </CellGroup>
        <CellGroup class="action-group">
            <Cell icon="envelop-o" title="Opinion feedback" is-link />
            <Cell icon="info-o" title="About the version" is-link />
        </CellGroup>
        <CellGroup class="action-group">
            
            <Cell icon="close" title="Logout" is-link
            @click="onLogout" />
            
        </CellGroup> -->
        <var-paper :elevation="2" class="action-group">

            <var-cell icon="checkbox-marked" title="Recharge" @click="center = true">
                <template #extra>

                    <var-icon name="chevron-right" />
                </template>
            </var-cell>
            <var-dialog v-model:show="center" title="" confirm-button-text="confirm" cancel-button-text="cancel" @confirm="recharge(value)">
                <var-cell><var-input placeholder="Please type your money" v-model="value" /></var-cell>
            </var-dialog>
            <router-link to="/booking">
                <var-cell icon="format-list-checkbox" title="Booking">
                    <template #extra>
                        <var-icon name="chevron-right" />
                    </template>
                </var-cell>
            </router-link>
            <router-link to="/notice">
                <var-cell icon="bell" title="Notice">
                    <template #extra>
                        <var-icon name="chevron-right" />
                    </template>
                </var-cell>
            </router-link>
            <var-cell icon="account-circle-outline" title="Logout" @click="onLogout">
                <template #extra>
                    <var-icon name="chevron-right" />
                </template>
            </var-cell>
        </var-paper>
    </div>
</template>

<script setup name="Profile">
import { ref } from 'vue'
import { Image, Icon, Grid, GridItem, CellGroup, Cell } from 'vant';
import {ElContainer,ElHeader,ElMain,ElFooter,ElInput} from 'element-plus';
import { useUserStore } from '@/stores/user';
import { useRouter } from "vue-router";
import axios from 'axios';
import { getToken, setToken } from '@/utils/auth';

const userStore = useUserStore();
const router = useRouter();
const center = ref(false)
const value = 0
const userdata = []
const actions = {
  confirm: () => Snackbar.success('confirm'),
  cancel: () => Snackbar.error('cancel'),
  close: () => Snackbar.info('close'),
}

function onLogout() {
    userStore.LogOut().then(() => {
        router.push({ path: "/login" });
    });
}
function showImg(e) {
    let file = e.target.files[0]
    console.log(file)
    console.log(file.name)
    axios({
        method: 'get',
        baseURL: 'https://fitzone.work:8080/avatar',
        params: {
            img: file
        }
    }).then(res => {
        console.log(res)
    })
}
function recharge(value){
    axios({
        method: 'get',
        baseURL: 'https://fitzone.work:8080/recharge',
        params: {
            money: value,
            id: userStore.userId
        }
    }).then(res=>{
        useUserStore().permissions[1]=res.data
        userStore.permissions[1]=res.data
    })
    userdata=getToken()
    userdata.balance+=value
    setToken(userdata)
}

</script>
<style lang="scss" scoped>
.profile-container {
    .action-group {
        margin-top: 10px;
    }

    .profile-header {
        &::before {
            content: '';
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            width: 100%;
            height: 240px;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 0;
        }

        width: 100%;
        height: 220px;
        background-image: url("../profile2/background.png");
        background-size: cover;

        display:flex;
        justify-content: center;
        align-items: center;

        .profile-info {
            z-index: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            color: #f0f0f0;

            &-avatar {
                border: 3px solid #f0f0f0;
                width: 80px;
                height: 80px;
            }

            &-nickname {
                font-size: 20px;
                margin: 7px;
            }

            &-address {
                font-size: 14px;
                margin: 5px 5px 0px 5px;
            }
        }


    }
}
</style>